<template>
    <!-- 添加或修改采购单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
        <div class="warp">
            <div class="title">
            {{ sjTitle }}
        </div>
        <div v-for="item in tableData" :key="item.id">
            <div>{{ item.title }}</div>
            <div v-for="(quest, qIndex) in item.questions" :key="quest.id">
                <div class="question">{{(qIndex + 1)}} 、{{ quest.problem }}？</div>
                <div class="option" v-for="option in quest.options" :key="option.id">
                    {{ option.option }}:{{ option.content }}
                </div>
            </div>
        </div>
        </div>
        
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="cancel">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { paperRecord } from "@/api/training/paper";

export default {
    name: "Order",
    data() {
        return {
            // 弹出层标题
            title: "",
            sjTitle: '',
            // 是否显示弹出层
            open: false,
            // 表单参数
            tableData: [],
        };
    },
    created() {

    },
    methods: {
        // 取消按钮
        cancel() {
            this.open = false;
        },
        /** 新增按钮操作 */
        handleShow(id) {
            this.open = true;
            this.tableData = [];
            this.title = "查看答题记录";
            paperRecord(id).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.questions_map
                    this.sjTitle = res.data.title;
                }
            })
        }
    }
};
</script>
<style>
.question {
    padding: 10px;
}

.option {
    line-height: 200%;
    padding-left: 20px;
}

.title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

.warp {
    height: 500px;
    overflow: auto;
}
</style>